import { transformConfig,transform2px } from '@/utils/customModule';
import { Image, View } from '@tarojs/components';
import React from 'react';
import Taro from '@tarojs/taro';
import { navigateTo } from '../../ModuleImg/utils';
import './index.scss';

const styleConfig = {
  img: {
    width: '{{px(imageSize)}}',
    height: '{{px(imageSize)}}',
    borderRadius: '{{px(borderRadius)}}'
  },

  color: ['color', 'backgroundColor'],
};

const ModuleNavTwoLine = ({ navList, styleSettingRender,styleSetting}) => {
  const style = transformConfig({...styleSettingRender}, styleConfig);
  let splitIndex = Math.ceil(navList?.length / 2);
  splitIndex = Number.isNaN(splitIndex) ? 0 : splitIndex;

  return (
    <View
      className="ModuleNavTwoLine"
      style={{
        ...style.module,
        ...style.color,
        borderRadius:transform2px(styleSettingRender.cardRadius)
      }}
    >
      <View className="container">
        {navList?.map(({ imgUrl, name, url }) => {
          return <View className="nav-item" key={imgUrl} style={{
            width:(100/(styleSetting?.displayNumber||5)) + '%',
            marginBottom:transform2px(styleSetting?.lineMargin)
          }}
            onClick={() => {
              if(!url || url == '#') return;
              if(url.includes('ant.shop/i/m/')){
                Taro.getLocation({
                  type: 'gcj02',
                  isHighAccuracy: true,
                  timeout: 5000,
                  complete:res=>{
                    Taro.navigateTo({
                      url:`/pages/fineEngine/webView?url=${encodeURIComponent(url)}`
                    })
                  }
                });
                return;
              }
              if(url.includes('http')){
                Taro.navigateTo({
                  url:`/pages/fineEngine/webView?url=${encodeURIComponent(url)}`
                })
                return;
              }
              navigateTo(`${url}&name=${name}`);
            }}
          >
            <Image src={imgUrl} className="img" style={style.img} />
            <View className="txt">{name}</View>
          </View>
        })}
      </View>

      {/* 占位 元素 */}
      {navList?.length < splitIndex * 2 && (
        <View className="nav-item">
          <View className="txt"></View>
        </View>
      )}
    </View>
  );
};

export default ModuleNavTwoLine;
